<header class="margin-block-start-double">
  <h2 class="divider txt-large">Export your data</h2>
  <p class="margin-none-block">Download an archive of your Fizzy data.</p>
</header>

<div data-controller="dialog" data-dialog-modal-value="true">
  <button type="button" class="btn" data-action="dialog#open">Begin export...</button>

  <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
    <h2 class="margin-none txt-large">Export your account data</h2>
    <p class="margin-none-block-start">This will kick off a request to generate a ZIP archive of all the data in boards you have access to.</p>
    <p>When the file is ready, we’ll email you a link to download it. The link will expire after 24 hours.</p>

    <div class="flex gap justify-center">
      <%= button_to "Start export", account_exports_path, method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
      <button type="button" class="btn" data-action="dialog#close">Cancel</button>
    </div>
  </dialog>
</div>